<template>
<el-container>
    <el-aside width="200px">
       <PersonalMenu></PersonalMenu>
    </el-aside>
    <el-main>
      <scheule v-on:edit="handleEdit"></scheule>
    </el-main>
<div>


</div>
    
</el-container>
</template>

<script>
import PersonalMenu from '@/components/menu/PersonalMenu.vue'
import instance from '@/utlis/request.js'
import scheule from '@/components/schedule/scheule.vue'

export default {
    
    components: {
        PersonalMenu,
        scheule
    },
  
    //钩子函数   一般用来初始化数据
    created:function(){
      this.initData();
    },
     methods: {
      //显示页面所有的日程功能
      initData(){
        var userinfo=window.sessionStorage.getItem("loginUser");
        var userinfoObj = JSON.parse(userinfo);
         var id = userinfoObj.id;
        instance.get("Web/schedule/listSchedule/"+id).then(res=>{
          this.schedules=res.data.data;
          //this.$refs.table.initData();
        })
      },
       //创建日程的功能
      onSubmit() {
        
          //日程名称格式判断
          if(this.schedule.event==undefined||this.schedule.event.trim()==""){
            this.error.event="日程名称不能为空";
            this.$refs.event.select();
            return;
          }else{
              this.error.event="";
          }
          //开始时间格式判断
          if(this.schedule.startTime==undefined||this.schedule.startTime==""){
              this.error.startTime="开始时间不能为空";
              this.$refs.startTime.focus();
              return;
          }else{
              this.error.startTime="";
          }
          //结束时间格式判断
          if(this.schedule.endTime==undefined||this.schedule.endTime==""){
              this.error.endTime="结束时间不能为空";
              this.$refs.endTime.focus();
              return;
          }else{
              this.error.endTime="";
          }
           //判断日程时间(结束时间不能小于开始时间)
           let date1 = new Date(this.schedule.startTime).getTime()
           //1646697600000
           //console.log(date1);
           let date2 = new Date(this.schedule.endTime).getTime()
           //1647216000000
           //console.log(date2);
           if(date1>date2){
              this.message="结束时间不能小于开始时间";
              return;
           }else{
             this.message=""
           }
           
            var userinfo=window.sessionStorage.getItem("loginUser");
            var userinfoObj = JSON.parse(userinfo);
            this.schedule.userinfoId=userinfoObj.id
           instance.post("Web/schedule/insertSchedule",this.schedule
          ).then(res=>{
               this.initData();
           });
      },
      //删除日程的功能
      handleDelete(index,row){
        var del=confirm("您确定删除该日程吗?");
        if(del==true){
        instance.get("Web/schedule/deleteSchedule",{
          params:{id:row.id}
        }).then(res=>{
          this.schedules.splice(index,1);
        });
       }
      },
      //修改页面       post提交方式(带参数):params:{id:row.id}
      handleEdit(edit){
        this.$router.push(
          {name:"PersonalUpdateCalendarView",params:{id:edit.id}
          });
      }
     
    }

}
</script>
<style scoped>
    .eventCss{
        margin-top: 100px;
        width: 680px;   
    }
    .dateCss{
        width: 320px;
    }
    .labCss{
       margin-top: 30px; 
    }
    .formCss{
         margin-left: 380px;
    }
    .butCss{
        margin-left: 260px;
        margin-top: 20px;
    }
    .errCss{
        color:red;
    }
   .timeCss{
      color:red;
   }

   
</style>